<template>
  <view class="train-page">
    <view class="train-header" style="padding: 20rpx;">
      <view class="header" style="font-size: 32rpx; ">训练我的智能体</view>
    </view>


    <!-- 基本信息卡片 -->
    <view class="card">
      <view class="card-title">
        <uni-icons type="home" size="24" color="#fff" />
        <text>我的基本信息</text>
      </view>
      <view class="divider"></view>
      <view class="form-group">
        <input class="input" placeholder="姓名" />
        <input class="input" placeholder="电话" />
        <input class="input" placeholder="公司名称" />
        <input class="input" placeholder="职务" />
      </view>
    </view>

    <!-- 个人履历卡片 -->
    <view class="card">
      <view class="card-title">
        <uni-icons type="person" size="24" color="#fff" />
        <text>个人履历信息</text>
      </view>
      <view class="divider"></view>
      <view class="form-group">
        <textarea class="textarea" placeholder="可填写您的求学经历、项目经历、创业经历，或是您对自己的评价" />
      </view>
    </view>

    <!-- 企业信息卡片 -->
    <view class="card">
      <view class="card-title">
        <uni-icons type="wallet" size="24" color="#fff" />
        <text>企业信息</text>
      </view>
      <view class="divider"></view>
      <view class="form-group">
        <textarea class="textarea" placeholder="公司介绍，比如公司地址、主营业务、合作伙伴、开发项目等" />
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="save-btn">保存&训练</button>
      <view class="tip">训练并更新将需要24小时</view>
    </view>
  </view>
</template>

<script setup>
// 这里可根据需要添加逻辑
</script>

<style scoped lang="scss">
.train-page {
  min-height: 100vh;
  background: #191c22;
  padding: 0 0 40rpx 0;
}
.header {
  width: 100%;
  background: #23252a;
  color: #ff9393;
  font-size: 32rpx;
  text-align: center;
  padding: 30rpx 0 20rpx 0;
  font-weight: bold;
  border-radius: 20rpx;
  // margin-bottom: 30rpx;
}
.card {
  background: none;
  margin: 0 24rpx 30rpx 24rpx;
}
.card-title {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 26rpx;
  font-weight: 500;
  margin-bottom: 6rpx;
  gap: 10rpx;
}
.divider {
  width: 92%;
  height: 2rpx;
  background: linear-gradient(90deg, #fff 0%, #888 100%);
  opacity: 0.18;
  margin: 0 auto 16rpx auto;
  border-radius: 1rpx;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
  align-items: center;
}
.input {
  background: #f5f6fa;
  border-radius: 16rpx;
  padding: 18rpx 24rpx;
  font-size: 26rpx;
  border: none;
  outline: none;
  width: 92%;
  margin: 0 auto;
  display: block;
}
.textarea {
  background: #f5f6fa;
  border-radius: 16rpx;
  padding: 18rpx 24rpx;
  font-size: 26rpx;
  border: none;
  outline: none;
  min-height: 90rpx;
  resize: none;
  width: 92%;
  margin: 0 auto;
  display: block;
}
.footer {
  margin-top: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.save-btn {
  width: 80%;
  background: #23252a;
  color: #fff;
  font-size: 28rpx;
  border-radius: 30rpx;
  padding: 18rpx 0;
  margin-bottom: 10rpx;
  border: none;
}
.tip {
  color: #888;
  font-size: 22rpx;
  text-align: center;
}
</style> 